<template>
  <view>
    <navbar></navbar>
    <view v-if="detail.shop_id" class="container">
      <view class="header">
        <view class="shop-logo">
          <image :src="detail.logo.file_path"></image>
        </view>
        <view class="shop-name">
          <text>{{ detail.shop_name }}</text>
        </view>
        <view v-if="detail.summary" class="shop-summary dis-flex">
          <text>门店简介：{{ detail.summary }}</text>
        </view>
      </view>
      <view class="content">
        <view class="content-item dis-flex flex-y-center">
          <view class="content-item__icon dis-flex">
            <text class="iconfont icon-shijian"></text>
          </view>
          <view class="content-item__text flex-box dis-flex">
            <text class="f-26">{{ detail.shop_hours }}</text>
          </view>
        </view>
        <view @tap.stop.prevent="onOpenLocation" class="content-item dis-flex flex-y-center">
          <view class="content-item__icon dis-flex">
            <text class="iconfont icon-dingwei"></text>
          </view>
          <view class="content-item__text flex-box dis-flex">
            <text class="f-26">{{ detail.region.province }}{{ detail.region.city }}{{ detail.region.region }}{{ detail.address }}</text>
          </view>
          <view class="content-item__arrow dis-flex">
            <text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
          </view>
        </view>
        <view @tap.stop.prevent="onMakePhoneCall" class="content-item dis-flex flex-y-center">
          <view class="content-item__icon dis-flex">
            <text class="iconfont icon-dianhua"></text>
          </view>
          <view class="content-item__text flex-box dis-flex">
            <text class="f-26">{{ detail.phone }}</text>
          </view>
          <view class="content-item__arrow dis-flex">
            <text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import navbar from "@/components/navbar/navbar";
export default {
  components: {
    navbar,
  },
    data() {
        return {
            // 门店详情
            detail: {
                shop_id: '',

                logo: {
                    file_path: ''
                },

                shop_name: '',
                summary: '',
                shop_hours: '',

                region: {
                    province: '',
                    city: '',
                    region: ''
                },

                address: '',
                phone: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        let _this = this; // 获取门店详情

        _this.getShopDetail(options.shop_id);
    },
    /**
     * 分享当前页面
     */
    onShareAppMessage() {
        let _this = this; // 构建页面参数

        let params = app.getShareUrlParams({
            shop_id: _this.detail.shop_id
        });
        return {
            title: _this.detail.article_title,
            path: '/pages/shop/detail/index?' + params
        };
    },
    methods: {
        /**
         * 获取门店详情
         */
        getShopDetail(shop_id) {
            let _this = this;

            app._get(
                'shop/detail',
                {
                    shop_id
                },
                function (result) {
                    _this.setData(result.data);
                }
            );
        },

        /**
         * 拨打电话
         */
        onMakePhoneCall() {
            let _this = this;

            uni.makePhoneCall({
                phoneNumber: _this.detail.phone
            });
        },

        /**
         * 查看位置
         */
        onOpenLocation() {
            let _this = this;

            let detail = _this.detail;
            uni.openLocation({
                name: detail.shop_name,
                address: detail.region.province + detail.region.city + detail.region.region + detail.address,
                longitude: Number(detail.longitude),
                latitude: Number(detail.latitude),
                scale: 15
            });
        }
    }
};
</script>
<style lang="scss">
  page {
      background: #fff!important;
  }
</style>
<style lang="scss" scoped>
.container {
    padding: 0 30rpx;
    background: #fff;
}

.header {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f1f1f1;
}

.shop-logo,
.shop-name {
    text-align: center;
}

.shop-logo image {
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
}

.shop-name {
    margin-top: 16rpx;
    font-size: 32rpx;
}

.shop-summary {
    padding: 20rpx;
    margin-top: 30rpx;
    font-size: 26rpx;
    line-height: 1.6;
    background: #f9f9f9;
    border-radius: 6rpx;
}

.content {
    margin-top: 30rpx;
}

.content-item {
    padding: 12rpx 0;
}

.content-item__text {
    padding: 0 20rpx;
}
</style>
